<template>
    <div class="employment_left">
        <!-- 左上角毕业人员去向 -->
        <div class="employment_top">
            <div class="employment_title">
                近三年来毕业人员去向
            </div>
            <div class="destination_box">
                <div class="city_box">
                    <h5>北京</h5>
                    <div class="city_all">
                        <div>
                            <p class="people2">2316人</p>
                            <img :src=personnel01 alt="">
                            <p>2022</p>
                        </div>
                        <div>
                            <p class="people1">3688人</p>
                            <img :src=personnel02 alt="">
                            <p>2021</p>
                        </div>
                        <div>
                            <p class="people0">5888人</p>
                            <img :src=personnel03 alt="">
                            <p>2020</p>
                        </div>
                    </div>
                </div>
                <div class="employment_chart" ref="destination_chart"></div>
            </div>
        </div>
        <!-- 左下角工作状态 -->
        <div class="employment_bottom">
            <div class="employment_title">
                毕业生工作状态
            </div>
            <div class="state_chart" ref="state_chart"></div>
        </div>
    </div>
</template>
<!-- employment -->
<script setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import './left.css'
import personnel01 from '../../../assets/images/人员 01.png'
import personnel02 from '../../../assets/images/人员 02.png'
import personnel03 from '../../../assets/images/人员 03.png'
import { getDestination, getState } from '../../../api'
import { onMounted } from 'vue'

const destinationdata = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        show: false
    },
    grid: {
        left: '3%',
        right: '4%',
        top:"10%",
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        splitLine: { show: false } // 取消 x 轴分隔线
    },
    yAxis: {
        type: 'category',
        data: ['上海', '天津', '重庆', '广东', '广西', '浙江', '江苏', '湖北']
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [5203, 2389, 2903, 4970, 3744, 6302, 3200, 3688],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#A520FF' }, // 0% 处的颜色
                        { offset: 1, color: '#FF007A' }  // 100% 处的颜色
                    ],
                    global: false // 缺省为 false
                }
            }
        },
        {
            name: '2012',
            type: 'bar',
            data: [6325, 2338, 3100, 2159, 1314, 6188, 2345, 2316],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#00CCD2' }, // 0% 处的颜色
                        { offset: 1, color: '#00A2FF' }  // 100% 处的颜色
                    ],
                    global: false // 缺省为 false
                }
            }
        },
        {
            name: '2013',
            type: 'bar',
            data: [5325, 2348, 3100, 1214, 4141, 6818, 2333, 5888],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#6A665A' }, // 0% 处的颜色
                        { offset: 1, color: '#FFC400' }  // 100% 处的颜色
                    ],
                    global: false // 缺省为 false
                }
            }
        }
    ]
})
const statedata = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
    },
    length: {
        color: "white"
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '70%'],  // 设置图表的半径范围
            center: ['50%', '50%'],  // 图表居中
            roseType: 'radius',     // 使用半径来显示比例
            data: [
                { value: 22500, name: '已就业' },
                { value: 3750, name: '未就业' },
                { value: 1250, name: '返回未就业' },
                { value: 1250, name: '以往未就业' },
                { value: 1250, name: '返校重听' }
            ],
            label: {
                show: true,
                formatter: function (params) {
                    return `{percent|${params.percent}%}\n{name|${params.name}}`;
                },
                position: 'outside',  // 保持标签在图表外部
                rich: {
                    percent: {
                        color: '#fff', // 默认颜色，可以通过 formatter 函数动态设置
                        fontSize: 12,
                        align: 'center'
                    },
                    name: {
                        color: '#fff', // 名称的颜色
                        fontSize: 12,
                        align: 'center'
                    }
                },
                distanceToLabelLine: 5 // 标签到连接线的距离
            },
            labelLine: {
                show: true,
                length: 10,
                length2: 20
            }
        }
    ]
})

const destination_chart = ref(null);
const state_chart = ref(null);

const DestinationData = async () => {
    try {
        // const res = await getDestination();
        // console.log(res);
        const mydestination_chart = echarts.init(destination_chart.value);
        mydestination_chart.setOption(destinationdata.value);
    } catch (error) {
        console.error('获取毕业人员去向数据时出错:', error);
    }
}

const StateData = async () => {
    try {
        // const res = await getState();
        // console.log(res);
        const mystate_chart = echarts.init(state_chart.value);
        mystate_chart.setOption(statedata.value);
    } catch (error) {
        console.error('获取工作状态数据时出错:', error);
    }
}

onMounted(() => {
    DestinationData();
    StateData();

    window.addEventListener('resize', () => {
        if (destination_chart.value) echarts.getInstanceByDom(destination_chart.value).resize();
        if (state_chart.value) echarts.getInstanceByDom(state_chart.value).resize();
    })
})
</script>

<style></style>